<template>
  <div class="header-type">
    <div
      class="item"
      :class="{'active': index === activeIndex}"
      v-for="(item, index) in types"
      :key="item.id"
      @click="handleClick(item, index)"
    >{{ item.description }}</div>
  </div>
</template>

<script>
export default {
  name: 'HeaderType',

  props: {
    types: {
      type: Array,
      default () {
        return []
      }
    }
  },

  data () {
    return {
      // 当前选中的下标
      activeIndex: 0
    }
  },

  methods: {
    handleClick (type, index) {
      // 当前点击的高亮
      this.activeIndex = index
      // 通知父组件
      // payload 如何要传递多个参数，需要弄成对象的形式
      this.$emit('click', { type, index })
    }
  }
}
</script>

<style lang="less" scoped>
.header-type {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  //下边框线
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #e9e9e9;
    transform: scaleY(0.5);
  }
  .item {
    width: 20%;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: #000;
    &.active {
      color: #e7370c;
    }
  }
}
</style>
